/* 
  学习目标：了解useState使用的三个注意事项
  */

import React, { useState } from 'react';
export default function App() {
  const [count, setCount] = useState(0);
  //  1. 组件添加任意个状态: 多次调用useState即可。
  const [msg, setMsg] = useState('Hello React');

  //  2. useState(初始值)可以任意类型
  // 数组、对象
  const [list, setList] = useState(['zs', 'ls', 'we']);
  const [obj, setObj] = useState({ name: 'React', age: 6 });
  console.log(obj, 'obj');

  //  3. 命名规范的问题
  // 👍 更新装的函数，3.1使用set开头，3.2带上状态的名字，3.2驼峰式写法；  setCount setMsg setList setObj
  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>

      <h2>{msg}</h2>
      <button onClick={() => setMsg(msg + '!')}>点击更新msg</button>
      <h1> count的值： {count}</h1>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
    </div>
  );
}
